/*全局属性*/
body,
html {
    font-size: 12px;
}

a {
    color: #333;
}

a:hover {
    color          : #06C;
    text-decoration: none
}

ul,
li {
    list-style: none;
    margin    : 0;
    padding   : 0;
}

/*404页面*/
.error404 {
    background-image : url(../images/404bg.jpg);
    background-repeat: no-repeat;
    width            : 856px;
    height           : 250px;
    margin: 15% auto;
}

.error404 .taglist {
    padding-top : 100px;
    padding-left: 300px;
}

.error404 .taglist a {
    color: #666
}

.error404 .home {
    color       : #3e4e68;
    padding-top : 5px;
    padding-left: 300px;
    font-size   : 14px;
    font-weight : bold
}

.error404 .home a {
    color: #3e4e68;
}

/* .banner */
.banner {
    height    : 800px;
    background: linear-gradient( 270deg, #d823d6, #ee96b6, #1a9fd2);
    background-size: 600% 600%;
    display   : table;
    position  : relative;
    width     : 100%;
    overflow: hidden;
    -webkit-animation: obu 8s ease infinite;
    -moz-animation: obu 8s ease infinite;
    animation: obu 8s ease infinite;
}

@-webkit-keyframes obu {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@-moz-keyframes obu {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@keyframes obu {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}

@media screen and (max-width:1680px) {
    .banner {
        height: 500px;
    }
}

.banner .bannerdivleft {
    width         : 55%;
    padding-left  : 5%;
    padding-top   : 80px;
    vertical-align: middle;
    display       : table-cell;
}

.banner .bannerdivleft h1 {
    font-family   : 'Fjalla One', sans-serif;
    letter-spacing: 2px;
    font-weight   : 700;
    color         : #fff;
    font-size     : 5rem;
    line-height   : 5rem;
}

.banner .bannerdivleft h2 {
    font-weight   : 900;
    color         : #fff;
    font-size     : 4rem;
    line-height   : 4rem;
    letter-spacing: 0px;
    margin-top    : 5%;
}

.banner .bannerdivleft h2 .smallx {
    font-weight: 100;
    font-size  : 3rem;
    color      : #fff;
}

.banner .bannerdivleft a {
    color: #fff;
}

.banner .bannerdivleft a .services {
    margin-top: 6%;
    padding   : 8px 10px;
    border    : 1px solid white;
    display   : inline-block;
    font-size : 1.2rem;
    color     : #fff;
}

.banner .bannerdivleft a .arrow {
    vertical-align: middle;
    padding       : 5px;
}

.banner .bannerdivleft a:hover img {
    padding-left: 20px;
    transition  : 0.3s;
}

.banner .bannerdivright {
    width         : 45%;
    display       : table-cell;
    vertical-align: bottom;
}

/* index-case */
.index-case,
.index-ensure,
.index-advantage,
.index-concept,
.index-faq,
.index-need,
.index-flow,
.index-hot-news,
.index-page {
    padding-top   : 3%;
    padding-bottom: 3%;
}

.index-case .title hr,
.index-service .title hr,
.index-ensure .title hr,
.index-advantage .title hr,
.index-concept .title hr,
.index-faq .title hr,
.index-need .title hr,
.index-flow .title hr,
.index-hot-news .title hr,
.index-page .title hr {
    height          : 8px;
    border          : none;
    background-color: #FF8040;
    margin          : 0 auto;
    width           : 50px;
}

.index-case .title h1,
.index-service .title h1,
.index-ensure .title h1,
.index-advantage .title h1,
.index-concept .title h1,
.index-faq .title h1,
.index-need .title h1,
.index-flow .title h1,
.index-hot-news .title h1,
.index-page .title h1 {
    font-size  : 34px;
    color      : #000;
    text-align : center;
    font-weight: 600;
    margin-top : 20px;
}

.index-page p {
    text-align: center;
    font-size : 24px;
    margin    : 3% auto;
}
.index-case{
    overflow: hidden;
}

.index-case-w {
    padding: 3% 0;
}

.index-case .index-case-fl,
.index-case .index-case-fr {
    margin-left: 1%;
    width      : 49%;
}

.index-case .index-case-fl img {
    width: 90%;
}

.index-case .index-case-fr {
    padding-left    : 0;
    background-image: url(../images/blob.svg);
    background-size : 100% 100%;
    background-size : cover;
}


.index-case .index-case-fr .box {
    width     : 80%;
    margin    : 0 auto;
    text-align: center;
    margin-top: 15%;
}

.index-case .index-case-fr h3 {
    font-weight: 700;
    font-size  : 24px;
    color      : #000;
}

.index-case .index-case-fr p {
    font-weight   : normal;
    font-size     : 1.3rem;
    color         : #666;
    line-height   : 1.8rem;
    letter-spacing: 1px;
    padding-top   : 5%;
}

.index-case .index-case-fr .app {
    text-align : center;
    padding-top: 10%;
}

.index-case .index-case-fr .app a {
    padding: 0 10px;
}

.index-case .index-case-fr .app img {
    width     : 20%;
    opacity   : 1;
    transition: 0.5s;
}

.index-case .index-case-fr .app a:hover img {
    opacity: .6;
}

.index-case .index-case-fr .more {
    width        : 50%;
    margin       : 0 auto;
    margin-top   : 13%;
    margin-bottom: 8%;
    text-align   : center;
}

.index-case .index-case-fr .more a {
    border-radius: 55px;
    border       : 1px solid #f4429f;
    text-align   : center;
    padding      : 12px;
    font-size    : 18px;
    line-height  : 36px;
    background   : #f4429f;
    color        : #fff;
    display      : block;
}

.index-case .index-case-fr .more a:hover {
    color     : #f4429f;
    background: #fff;
    transition: all 0.3s;
}

/* index-service */
.index-service {
    background: #FFD6E8;
    padding   : 3% 0;
}

.index-service ul {
    width          : 90%;
    margin         : 5% auto 0;
    display        : flex;
    flex-direction : row;
    justify-content: space-between;
    flex-wrap      : wrap;
    align-items    : stretch;
}

.index-service li {
    width        : 48%;
    padding      : 6%;
    border       : 6px solid black;
    margin-bottom: 4%;
}

.index-service li h3 {
    color      : #000;
    font-size  : 24px;
    line-height: 1em;
    font-weight: 700;
}

.index-service li p {
    font-size  : 18px;
    line-height: 30px;
    font-weight: 400;
    padding-top: 3%;
    text-align : left;
}

.index-service .more,
.index-faq .more,
.index-need .more {
    text-align: center;
}

.index-service .more a,
.index-faq .more a,
.index-need .more a {
    font-size    : 1.2em;
    background   : #f4429F;
    color        : #fff;
    border-radius: 55px;
    padding      : 18px;
    display      : inline-block;
}

.index-service .more a:hover img,
.index-faq .more a:hover img,
.index-need .more a:hover img {
    padding-left: 10px;
    transition  : 0.3s;
}

/* index-ensure  */
.index-ensure {
    background-color: #e5e3d6;
}

.index-ensure ul {
    width          : 90%;
    margin         : 3% auto 0;
    justify-content: space-between;
}

.index-ensure ul li {
    width           : 32%;
    background-color: #fff;
    text-align      : center;
    padding         : 3% 5% 5% 5%;
    height          : 300px;
}

.index-ensure ul li img {
    vertical-align: middle;
    width         : 70px;
}

.index-ensure ul li h3,
.index-advantage ul li h3 {
    padding    : 2%;
    font-size  : 24px;
    font-weight: bold;
}

.index-ensure ul li p,
.index-advantage ul li p {
    font-size  : 18px;
    line-height: 30px;
    font-weight: 400;
    padding-top: 3%;
    text-align : left;
}

/* index-advantage  */
.index-advantage {
    background: #F1EFE9;
}

.index-advantage ul {
    width          : 90%;
    margin         : 5% auto 0;
    display        : flex;
    flex-direction : row;
    justify-content: space-between;
    flex-wrap      : wrap;
    align-items    : stretch;
}

.index-advantage ul li {
    width           : 48%;
    background-color: #fff;
    position        : relative;
    margin-bottom   : 8%;
    padding         : 40px 5% 15px;
    border-radius   : 25px;
    filter          : drop-shadow(0px 2px 5px #ccc);

}

.index-advantage ul li .icon {
    position        : absolute;
    top             : -40px;
    width           : 80px;
    height          : 80px;
    background-color: #dededb;
    border-radius   : 50%;
    left            : 50%;
    margin-left     : -40px;
    display         : flex;
    align-items     : center;
    justify-content : center;
}

.index-advantage ul li .icon img {
    width: 50px;
}

.index-advantage ul li h3 {
    text-align: center;
}

/* index-concept  */
.index-concept {
    background-image: url(../images/bk5.jpg);
    background-size : cover;
}

.index-concept ul {
    width           : 90%;
    margin          : 5% auto 0;
    display         : flex;
    justify-content : space-between;
    background-color: rgba(0, 0, 0, 0.8);
    padding         : 3% 5%;
}

.index-concept ul li {
    display    : flex;
    align-items: center;
}

.index-concept ul li img {
    width: 20%;
}

.index-concept ul li p {
    color       : #fff;
    font-weight : bold;
    font-family : 'Fjalla One', sans-serif;
    font-size   : 20px;
    padding-left: 5px;
}


/* index-faq  */

.index-faq {
    background-color: #ECE5DF;
}

.index-faq ul {
    margin-top: 3%;
}

.index-faq li {
    float        : left;
    width        : 26.67%;
    box-sizing   : border-box;
    margin-bottom: 3%;
    margin-left  : 5%;
}

.index-faq li .box {
    height          : 100%;
    background-color: #dad1c9;
    color           : #fff;
    padding         : 20px;
    position        : relative;
    margin          : 10px;
    border-radius   : 25px;
    text-align      : center;
}

.index-faq li a {
    color    : #000;
    font-size: 16px;
}

.index-faq li:nth-child(1) .box:after,
.index-faq li:nth-child(2) .box:after,
.index-faq li:nth-child(3) .box:after {
    content      : " ";
    position     : absolute;
    right        : 30px;
    bottom       : -15px;
    border-top   : 15px solid #dad1c9;
    border-right : 15px solid transparent;
    border-left  : 15px solid transparent;
    border-bottom: none;
}

.index-faq li:nth-child(4) .box:after,
.index-faq li:nth-child(5) .box:after,
.index-faq li:nth-child(6) .box:after {
    content      : " ";
    position     : absolute;
    right        : 30px;
    top          : -15px;
    border-top   : none;
    border-right : 15px solid transparent;
    border-left  : 15px solid transparent;
    border-bottom: 15px solid #dad1c9;
}

.index-need .index-need-box {
    width   : 90%;
    margin  : 0 auto;
    overflow: hidden;
}

.index-need .index-need-box .fl-box,
.index-need .index-need-box .fr-box {
    width: 50%;

}

.index-need .index-need-box .fl-box li {
    margin-top: 3%;
    font-size : 18px;
    position  : relative;
}

.index-need .index-need-box .fl-box li::before {
    content: '\25B8';
    color  : Red;
}

.index-need .index-need-box .fr-box {
    text-align: center;
}

.index-need .index-need-box .fr-box img {
    width: 80%;
}

.index-flow {
    background-color: #eee;
    overflow        : hidden;
}

.infex-flow-warp {
    padding   : 0 5%;
    margin-top: 3%;
}

.infex-flow-warp .swiper-container {
    overflow: hidden;
}

.index-flow .swiper-slide {
    width           : 28%;
    height          : 250px;
    margin-right    : 2%;
    color           : #999;
    padding         : 2%;
    background-color: #F6D2D6;
}


.index-flow .swiper-slide h3 {
    color    : #000;
    font-size: 22px;
    font-weight: 100;
}

.index-flow .swiper-slide p {
    color      : #666;
    line-height: 30px;
    font-size  : 1.1em;
}

.index-flow .swiper-slide i {
    position   : absolute;
    bottom     : 5px;
    right      : 0px;
    font-size  : 66px;
    color      : rgba(0, 0, 0, 0.2);
    line-height: 4rem;
    font-style : normal;
}

.index-flow .swiper-pagination {
    text-align: center;
    height    : 20px;
    overflow  : hidden;
    position  : relative;
    margin-top: 2%;
}

.index-flow .swiper-pagination span {
    margin          : 0 5px;
    background-color: #000;
}

.index-flow .swiper-button-next,
.index-flow .swiper-button-prev {
    color: #f4429F !important;
}

.index-flow .swiper-pagination-bullet-active {
    background-color: #f4429f !important;
}


.index-hot-news li {
    float        : left;
    width        : 46%;
    border       : 1px solid #ccc;
    border-radius: 5px;
    margin-top   : 2%;
    margin-left  : 2.5%;
}

.index-hot-news li .article-left {
    float  : left;
    width  : 20%;
    padding: 2%;
}

.index-hot-news li .article-left img {
    width: 100%;
}

.index-hot-news li .article-right {
    float  : right;
    width  : 72%;
    padding: 2%;
}


.index-hot-news li .article-right h4 a {
    font-weight   : bold;
    color         : #666;
    line-height   : 30px;
    letter-spacing: 1px;
    font-size     : 20px;
}

.index-hot-news li .article-right p {
    margin-top   : 3%;
    font-size    : 16px;
    padding-right: 2%;
    color        : #666;
}

.index-hot-news .more {
    width        : 80%;
    margin       : 5% auto 0;
    margin-bottom: 1%;
    text-align   : center;
}

.index-hot-news .more a {
    width           : 50%;
    margin          : 0 auto;
    border-radius   : 55px;
    border          : 1px solid #f4429f;
    background-color: #f4429f;
    color           : #fff;
    text-align      : center;
    padding         : 12px;
    font-size       : 18px;
    line-height     : 36px;
    display         : block;
}

.index-hot-news .more a:hover {
    transition      : all .3s;
    background-color: #fff;
    color           : #f4429f;
}

.index-hot-news li .article-right h4 a:hover {
    color     : #f4429f;
    transition: all .3s;
}

.about ul,
.about .pic-list {
    width : 90%;
    margin: 3% auto 0;
}

.about li,
.about .pic-list .li {
    float        : left;
    width        : 46%;
    margin-bottom: 4%;
}

.about li:nth-child(even),
.about .pic-list .li:nth-child(even) {
    width      : 46%;
    margin-left: 8%;
}

.about li h3,
.pic-list .li h3 {
    font-size    : 24px;
    margin-bottom: 20px;
}

.about li p,
.pic-list .li p {
    font-size  : 18px;
    line-height: 24px;
    text-align : left;
}

.about .pic-list .li {
    text-align: center;
}

.about .pic-list .li h3 {
    text-align: center;
}

.about .pic-list .li img {
    max-width: 100%;
    height   : auto;
    width    : 75%;
}

.about .pic-list .li strong {
    font-weight: bold;
    display    : block;
    text-align : center;
    font-size  : 18px;
    margin     : 10px 0 20px;
}

.about .pic-list {
    margin-top: 0;
}

.about-list {
    background: linear-gradient(90deg, rgba(131, 58, 180, 1) 0%, rgba(253, 29, 29, 1) 50%, rgba(252, 176, 69, 1) 100%);
    padding   : 5% 0;
}

.about-list .warp {
    width : 80%;
    margin: 0 auto;
}

.about-list .title,
.about-list-box .title {
    text-align  : left;
    color       : #fff;
    border-left : 6px solid #fff;
    padding-left: 20px;
    font-size   : 24px;
}

.about-list ul {
    display   : flex;
    margin-top: 3%;
}

.about-list li {
    flex          : 50%;
    flex-direction: row;
    padding       : 3%;
    align-self    : flex-start;
    box-sizing    : border-box;
}

.about-list li h3 {
    color    : #fff;
    font-size: 22px;
}

.about-list li p {
    font-size  : 18px;
    line-height: 24px;
    margin-top : 20px;
    color      : #fff;
}

.about-list-box {
    background: #000;
    padding   : 5% 10%;
}

.about-list-box .img {
    margin    : 0 auto;
    text-align: center;
}

.about-list-box .img img {
    max-height: 100%;
    padding   : 3%;
    width     : 20%;
}

.service {
    width     : 90%;
    margin    : 0 auto;
    text-align: center;
}

.service .dl {
    margin: 5% 0;
}

.service .service-warp {
    display       : flex;
    flex-direction: row;
    flex-wrap     : wrap;
}

.service .dl .dt {
    font-weight  : 700;
    font-size    : 28px;
    margin-bottom: 0%;
    background   : #000;
    color        : #fff;
    display      : inline-block;
    padding      : 2%;
}

.service .service-warp .dd {
    width           : 50%;
    padding         : 5%;
    text-align      : left;
    background-color: #FDF0EC;
}

.service .service-warp .dd:nth-child(2),
.service .service-warp .dd:nth-child(3),
.service .service-warp .dd:nth-child(6) {
    background-color: #b7dce6;
}

.service .service-warp .dd h3 {
    font-weight   : 700;
    padding-top   : 3%;
    padding-bottom: 3%;
    font-size     : 24px;
}

.service .service-warp .dd ul {
    list-style : circle;
    font-size  : 18px;
    line-height: 31px;
    margin-top : -2%;
}

.service .service-warp .dd ul li {
    position    : relative;
    padding-left: 5%;
    margin      : 1% 0;
    font-size   : 16px;
    font-weight : 500;

}

.service .service-warp .dd ul li::after {
    content      : '';
    position     : absolute;
    left         : 0;
    top          : 50%;
    margin-top   : -3px;
    width        : 6px;
    height       : 6px;
    border-radius: 50%;
    border       : 1px solid #000;
}

.list-app {
    width : 95%;
    margin: 0 auto;
}

.list-app .tab-nav ul {
    display        : flex;
    justify-content: center;
    align-items    : center;
    margin         : 3% 0;
}

.list-app .tab-nav li {
    padding         : 5px 15px;
    background-color: #f1f1f1;
    transition      : 0.5s;
    border-radius   : 25px;
    font-size       : 1em;
    font-family     : microsoft Jhenghei;
    margin          : 5px 10px;
    text-align      : center;
}

.list-app .tab-nav li a {
    font-size: 16px;
}

.list-app .tab-nav li:hover,
.list-app .tab-nav li.a01 {
    background-color: #f4429f;
}

.list-app .tab-nav li:hover a,
.list-app .tab-nav li.a01 a {
    color: #fff;
}

.list-case-app ul {
    display        : flex;
    flex-wrap      : wrap;
    justify-content: space-evenly;
    margin-top     : 3%;
}

.list-case-app li {
    flex-basis   : 28%;
    margin-bottom: 3%;
    text-align   : center;
    cursor       : pointer;
    transition   : 0.3s;
}

.list-case-app li:hover,
.list-case-web li:hover {
    transform: scale(1.02);
}

.list-case-app li img {
    width: 100%;
}

.list-case-app li h3 {
    margin-top: 1%;
    font-size : 18px;
}

.list-case-app li .icon {
    margin-top    : 5%;
    text-align    : left;
    vertical-align: middle;
    cursor        : none;
}

.list-case-app li .icon img {
    width       : 20px;
    margin-right: 5%;
}

.list-case-app li .popup {
    display: none;
}

.case-popup,
.video-popup {
    background-color: rgba(0, 0, 0, 0.3);
    position        : fixed;
    top             : 0;
    right           : 0;
    bottom          : 0;
    left            : 0;
    z-index         : 1;
    display         : none;
}

.case-popup .popup-warp {
    width           : 80%;
    padding         : 1%;
    background-color: #565656;
    border          : 2px solid orange;
    height          : 560px;
    overflow        : scroll;
    position        : fixed;
    z-index         : 2;
    top             : 50%;
    left            : 50%;
    margin-top      : -270px;
    margin-left     : -40%;
}

.case-popup .popup-warp .warps {
    position: relative;
}

.case-popup .popup-warp .close {
    position   : absolute;
    right      : 10px;
    top        : 0px;
    color      : #aaaaaa;
    font-size  : 50px;
    font-weight: 100;
    width      : 20px;
    height     : 20px;
    line-height: 20px;
    cursor     : pointer;
}

.case-popup .popup-warp .close:hover {
    color: orange;
}

.case-popup .popup-warp .warps-c {
    width : 90%;
    margin: 3% auto;
}

.case-popup .popup-warp .warps-c .info {
    margin-bottom : 15px;
    font-weight   : 700;
    border-bottom : 1px solid orange;
    padding-right : 10px;
    padding-bottom: 15px;
    font-size     : 18px;
    color         : #fff;
}

.case-popup .popup-warp .warps-c .info span {
    border-left  : 3px solid orange;
    padding-right: 15px;
}

.case-popup .popup-warp .warps-c .info.no {
    border        : 0;
    padding-bottom: 10px;
    margin-bottom : 0;
}

.case-popup .popup-warp .warps-c li {
    line-height  : 26px;
    padding-left : 2%;
    font-size    : 16px;
    color        : #fff;
    margin-bottom: 5px;
}

.case-popup .popup-warp .warps-c li::before {
    content: '\25B8';
    color  : orange;
}

.nomarls {
    text-align: center;
    font-size : 16px;
    padding   : 3% 0;
}

.list-case-web {
    width : 95%;
    margin: 0 auto;
}

.list-case-web ul {
    display        : flex;
    flex-wrap      : wrap;
    justify-content: flex-start;
}

.list-case-web li {
    flex-basis: 30%;
    margin    : 1.5%;
    text-align: center;
    min-height: 150px;
    border    : 1px solid #000;
    transition: 0.3s;
}

.list-case-web li h3 {
    font-size       : 20px;
    font-weight     : 700;
    padding         : 3%;
    color           : #fff;
    border          : 0;
    background-color: #000;
}

.list-case-web li img {
    width: 100%;
}

.list-case-web li p {
    font-size     : 18px;
    color         : #000;
    padding       : 3%;
    font-weight   : 400;
    text-align    : left;
    letter-spacing: 1px;
    line-height   : 24px;
}

.list-video {
    width : 80%;
    margin: 0 auto;
}

.list-video ul {
    display        : flex;
    flex-wrap      : wrap;
    justify-content: flex-start;
}

.list-video li {
    flex-basis: 48%;
    margin    : 1.5%;
    transition: 0.3s;
    cursor    : pointer;
}

.list-video li .iframe {
    display: none;
}

.list-video li .img {
    padding : 10px;
    border  : 1px solid #ccc;
    position: relative;
}

.list-video li .img img {
    width: 100%;
}

.list-video li .img .btns {
    position   : absolute;
    left       : 50%;
    top        : 50%;
    width      : 140px;
    height     : 140px;
    margin-left: -70px;
    margin-top : -70px;
    z-index    : 1;
    cursor     : pointer;
    opacity    : .7;
}

.list-video li h3 {
    font-family : 'open sans';
    font-size   : 18px;
    color       : #363636;
    padding-top : 5px;
    padding-left: 1%;
    font-weight : 500;
}

.list-video li p {
    font-weight : 100;
    padding-top : 6px;
    font-size   : 16px;
    padding-left: 1%;
    text-align: left;
}

.list-video li:hover .btns {
    opacity   : 1;
    transition: all .3s;
}


.iframe-warp {
    position: fixed;
    z-index : 99;
    width   : 60%;
    top     : 20%;
    left    : 20%;
}

.iframe-warp iframe {
    width: 100% !important;
}

.iframe-warp .close {
    background: #FF3300;
    width     : 120px;
    text-align: center;
    padding   : 8px;
    color     : #fff;
    font-size : 20px;
}

.iframe-warp .iframe-h {
    min-height      : 340px;
    background-color: #ccc;
}

.list-faq .panel-body {
    display: none;
}

.list-faq {
    width : 85%;
    margin: 0 auto;
}

.list-faq .h3 {
    padding-top: 5%;
    color      : #333;
    font-size  : 24px;
}

.list-faq li .panel-header {
    background-color: #eee;
    color           : #444;
    cursor          : pointer;
    padding         : 18px;
    width           : 100%;
    border          : none;
    text-align      : left;
    outline         : none;
    font-size       : 17px;
    transition      : 0.4s;
    font-family     : 'Microsoft JhengHei';
    margin-top      : 10px;
    position        : relative;
}

.list-faq li .panel-body {
    background-color: #F1EFE9;
    overflow        : hidden;
    text-align      : left;
    color           : #666;
    padding         : 18px 20px;
    font-size       : 16px;
}

.list-faq li .panel-header::after {
    content     : '\2228';
    color       : #3b9ef2;
    font-weight : bold;
    float       : right;
    padding-left: 25px;
}

.list-faq li .panel-header.down::after {
    content: '\2227';
}

.list-client {
    width          : 95%;
    margin         : 0 auto;
    display        : flex;
    flex-wrap      : wrap;
    justify-content: flex-start;
}

.list-client img {
    opacity      : 0.5;
    padding-left : 15px;
    padding-right: 15px;
    padding-top  : 45px;
    text-align   : left;
    width        : 15%;
}

.list-client img:hover {
    opacity   : 1;
    transition: all .3s;
}

.list-blog {
    margin-top: 5%;
}

.blog h4 a {
    color: #f4429f !important;
}

.blog p {
    font-size: 18px !important;
    color    : #000 !important;text-align: left;
}

.content-blog {
    width : 80%;
    margin: 8% auto;
}

.content-blog #pagenav {
    color: #999;
}

.content-blog #pagenav a {
    font-size    : 16px;
    color        : #999;
    margin-bottom: 3%;
}

.content-blog .contents h1 {
    margin-top: 3%;
    font-size : 24px;
}

.content-blog .contents .desc {
    margin-top    : 20px;
    margin-bottom : 20px;
    line-height   : 31px;
    color         : #333;
    letter-spacing: 1px;
    font-size     : 18px;
}

.content-hot {
    background-color: #f9f9f9;
    padding         : 3% 0;
}

.content-hot .content-hot-warp {
    width : 90%;
    margin: 0 auto;
}

.content-hot h2 {
    text-align   : center;
    font-size    : 24px;
    font-weight  : bold;
    margin-bottom: 5%;
}

.content-hot .content-hot-warp ul {
    display        : flex;
    flex-wrap      : wrap;
    justify-content: flex-start;
}

.content-hot .content-hot-warp li {
    border         : 1px solid #999;
    flex           : 0 0 31%;
    margin         : 1%;
    justify-content: space-between;
    background     : #fff;
    border-radius  : 5px;
    padding        : 1%;
}

.content-hot .content-hot-warp li h4 a {
    color    : #F4429f;
    font-size: 20px;
}

.content-hot .content-hot-warp li p {
    font-size  : 18px;
    color      : #000;
    line-height: 24px;
    margin-top : 3%;
}

.content-hot .content-hot-warp li h4 a:hover {
    color     : #e01c82;
    transition: all .3s;
}

.contact {
    width: 90%;
    margin: 0 auto;
}
.contact .left{
    width: 45%;
    margin-right: 5%;
}

.contact .right{
    width: 45%;
    margin-left: 5%;
}

.contact li{
    margin-bottom: 20px;
}

.contact li label{
    display: block;
    font-size: 18px;
    color: #666;
}

.contact li label span{color:red;}
.contact li input,.contact li textarea{
    border: 1px solid #BEBEBE;
    padding: 10px;
    line-height: 28px;
    display: block;
    width: 100%;
}

.contact li input:focus,.contact li textarea:focus{
    box-shadow: 0 0 8px #ccc;
    border: 1px solid #f4429f;
}

.contact li textarea{
    height: 140px;
    outline: none;
    resize: none;
}

.contact .left .btn{
    text-align: center;
    margin-top: 60px;
}
.contact .left .btn button{
    display: inline-block;
    width: 200px;
    height: 40px;
    background-color: #fff;
    border: 1px solid #f4429f;
    color: #f4429f;
    font-size: 16px;
    cursor: pointer;
}

.contact .left .btn button:hover{
    background-color: #f4429f;
    color: #fff;
    transition: all .3s;
}

.contact .right .tels{
    margin-bottom: 10px;
    display: flex;
    align-items: center;
}

.contact .right .tels a{
    font-size: 18px;
    margin-left: 10px;
    font-weight: 700;
    color: #f4429f;
    display: inline-block;
}

.contact .right .email,.contact .right .address{
    padding: 10px 0;
    color: #666;
    font-size: 18px;
}

.contact .right .email a{
    color: #666;
    font-size: 18px;
}

.contact .right .codes{
    margin: 3% 0;

}

.contact .right .codes img{
    border-radius: 50px;
    border: 1px solid grey;
    width: 150px;
}

.contact .right .codes .p{text-align: center;font-size: 18px;color: #666;width: 150px;margin: 10px 0;
}

.contact .right .codes .p span{color: #2CC014;}